<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <Popconfirm
        title="确定要删除吗"
        ok-text="确认"
        cancel-text="取消"
        @confirm="handleBatchDeletUser"
      >
        <a-button type="primary">批量删除</a-button>
      </Popconfirm>
    </template>
    <template #action="{ record, column }">
      <TableAction :actions="createActions(record, column)" />
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    FormSchema,
    useTable,
    TableAction,
  } from '/@/components/Table';
  import { ListApi, ChangeStatusApi, DeleteApi } from '/@/api/user/averageUser';
  import { genderTypes, usingState } from '/@/assets/dic';
  import formatDic from '/@/utils/formatDic';
  import { UserItem } from '/@/api/user/userModel';
  import { Popconfirm } from 'ant-design-vue';

  const columns: BasicColumn[] = [
    {
      title: '昵称',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      format: formatDic(genderTypes),
    },
    {
      title: '手机号',
      dataIndex: 'phoneNumber',
    },
    // {
    //   title: '地区',
    //   dataIndex: 'area',
    // },
    {
      title: '状态',
      dataIndex: 'isUse',
      format: formatDic(usingState),
    },
  ];

  const colProps = {
    span: 6, //宽度  一行24
  };
  const schemas: FormSchema[] = [
    {
      label: '昵称：',
      field: 'name',
      component: 'Input',
      colProps,
    },
    {
      label: '手机号：',
      field: 'phoneNumber',
      component: 'Input',
      colProps,
    },
  ];

  export default defineComponent({
    name: 'AverageUser',
    components: {
      BasicTable,
      TableAction,
      Popconfirm
    },
    setup() {
      // const selectedRowKeys = ref<string[]>([]);
      const [registerTable, { reload, getSelectRows }] = useTable({
        api: ListApi,
        useSearchForm: true,
        rowSelection: {
          type: 'checkbox',
        },
        columns,
        formConfig: {
          schemas,
          labelWidth: 100,
        },
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      // 改变用户的使用状态
      function handleChangeStatus(record: UserItem) {
        record.isUse = record.isUse === 0 ? 1 : 0;
        ChangeStatusApi(record).then((_) => {
          reload();
        });
      }

      // 删除用户
      function handleDeletUser(ids: number | number[]) {
        console.log(ids);
        DeleteApi(ids).then((_) => {
          reload();
        });
      }

      // 拿到需要批量删除的id
      function handleBatchDeletUser() {
        const selectRows = getSelectRows();
        const ids = selectRows.map((item) => item.id);
        handleDeletUser(ids);
      }

      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        return [
          {
            label: record.isUse === 0 ? '启用' : '禁用',
            onClick: handleChangeStatus.bind(null, record as UserItem),
          },
          {
            label: '删除',
            color: 'error',
            popConfirm: {
              title: '确定要删除吗！',
              confirm() {
                handleDeletUser(record.id);
              },
            },
          },
        ];
      }
      return {
        registerTable,
        createActions,
        handleBatchDeletUser,
      };
    },
  });
</script>
<style lang="less" scoped></style>
